<template>
    <view class="container" v-if="roomList">
        <!-- <view class="course_type_list">
            <scroll-view scroll-x class="tab-h" :scroll-into-view="'tab_'+positionTab" scroll-with-animation='true'>
              <view  v-for="(item,index) in courseTypeList" :key="index" @tap='bindTypeItem(index)' :id="'tab_'+item.id" class='tab-item' :style="{color:positionTab==index?defaultColor:'',}">
                {{item.title}}
                <text class="active_border" :style="{borderBottom:'4rpx solid '+defaultColor}" v-if="positionTab==index"></text>
              </view>
            </scroll-view>
        </view> -->
        <view class="live_room_list" v-if="roomList&&roomList.length!=0">
            <view @tap="toRoom(itemData.map.roomid)" class="live_room_item" v-for="(itemData,index) in roomList" :key='index'>
                <view class="live_room_item_banner">
                    <image :src="itemData.map.cover_img" mode="aspectFill" class="live_room_item_banner_img"></image>
                    <image src="http://image1.sansancloud.com/xianhua/2020_4/28/10/1/43_722.jpg?x-oss-process=style/preview_120" class="paly_btn"></image>
                    <view class="live_room_item_state" :style="'background:'+defaultColor">
                        <text v-if="itemData.map.live_status==101">正在直播中</text>
                        <text v-else-if="itemData.map.live_status==102">{{itemData.map.startTime}}开播</text>
                        <text v-else-if="itemData.map.live_status==103">回顾重播</text>
                        <text v-else-if="itemData.map.live_status==105">直播暂停中</text>
                        <text v-else-if="itemData.map.live_status==107">未开播</text>
                    </view>
                </view>
                <view class="anchor_info">
                    <text class="room_name">
                       {{itemData.map.name}}
                    </text>
                    <view class="anchor_base_info">
                        <view class="anchor_base_info_left">
                            <image mode="aspectFill" :src="itemData.map.cover_img" class="anchor_icon"></image>
                            <text class="anchor_name">{{itemData.map.anchor_name}}</text>
                        </view>
                        <image  @tap.stop="showShare(itemData)" src="http://image1.sansancloud.com/xianhua/2020_4/24/17/3/24_448.jpg?x-oss-process=style/preview_120" class="share_icon"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="noproduct" v-else>
          <image mode="widthFix" src='https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120'></image>
          <text>没有相关直播</text>
        </view>
        <!-- 分享 -->
        <view class="zhezhao" v-if="showTypeTwo" @tap="closeZhezhao"></view>
        <view class="select_share_list" :animation="animationDataTwo">
          <view class="select_share_item" v-for="(item, index) in shareTypeData" :key="index">
            <text class="select_share_name" @click.stop="showPoster" v-if="item.type=='text'">{{item.name}}</text>
            <button open-type="share" class="select_share_name" v-else>{{item.name}}</button>
          </view>
          <view class="select_share_item cancel_select_share" @tap="closeZhezhao">
            <text class="select_share_name">取消</text>
          </view>
        </view>
    </view>
</template>

<script>
import { socketFun } from "../../wxcomponents/public/json2Form";
export default {
  data() {
    return {
      courseList:null,
      courseTypeList:[],
      setting:null,
      positionTab:0,
      listPage:{
          page: 1,
          pageSize: 20,
          totalSize: 0,
          roomId: "",
      },
      secondColor:'',
      defaultColor:'',
      roomList:null,
      selectData:null,
      showTypeTwo: false,
      animationDataTwo: null,
      shareTypeData: [{
        name: '发送给朋友',
        type: 'botton'
      }, 
      // {
      //   name: '生成海报',
      //   type: 'text'
      // },
      ],
    };
  },
  props: {},

  /*onload*/
  onLoad: function (options) {
    let that=this;
    console.warn("======onLoad:options======", options, getApp().globalData.setting);
    // that.getTypeData();
    that.gainLivePlayerRooms(that.listPage,'upload')
  },
  onReady: function () {
    
  },
  onShow: function () {
    let that=this;
	that.setData({
        setting:getApp().globalData.setting,
        defaultColor:getApp().globalData.setting.platformSetting.defaultColor,
        secondColor:getApp().globalData.setting.platformSetting.secondColor,
       })
  },
  /* 分享 app.js862行*/
  onShareTimeline:function(){
      return this.shareFun()
  },
  onShareAppMessage: function (res) {
      console.log(res);
      return this.shareFun()
  },
  onPullDownRefresh: function () {
    let that = this; // 下拉刷新的时候首先判断存不存在tab
    console.log("下拉");
    that.listPage.page=1
    that.getData(that.listPage);
    wx.stopPullDownRefresh();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('===onReachBottom====');
    let that = this
    if (that.listPage.totalSize > that.listPage.page * that.listPage.pageSize) {
      that.listPage.page++
      that.gainLivePlayerRooms(that.listPage,'upload');
    }else{
        wx.showToast({
          title: "到底了~",
          image: '/wxcomponents/images/icons/tip.png',
          duration: 1000
        });
    }
  },
  methods: {
    shareFun:function(){
        let that = this;
        let params = that.onloadOpt;
        console.log('params:' , params);
        return getApp().globalData.shareForFx2( `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}`, that.selectData.map.name, '',that.selectData.map.cover_img);
    },
    // 关闭海报
    closeZhezhao: function () {
      this.setData({
        showTypeTwo: false
      });
      let animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease-out'
      });
      animation.height(0).step();
      let setData = animation.export();
      this.setData({
        animationDataTwo: setData
      });
    },
    showShare: function (itemData) {
      this.setData({
        showTypeTwo: !this.showTypeTwo,
        selectData:itemData
      });
      let showTypeTwo = this.showTypeTwo;
      let animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease-in-out'
      });
      console.log("=======popupFormPage==========", animation, this.showType);

      if (showTypeTwo) {
        animation.height(100).step();
      } else {
        animation.height(0).step();
      }

      this.setData({
        animationDataTwo: animation.export()
      });
    },
    toRoom:function(id){
        wx.navigateTo({
            url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}`
        })
    },
    gainLivePlayerRooms: function (param) {
      console.log("======a=======")
      var that = this;
      let params=Object.assign({},param,{
      })
      console.log("===params==",params)
      getApp().globalData.showToastLoading('loading', true)
      let menDianYangShi = getApp().globalData.AddClientUrl("/wx_find_mini_live_player_rooms.html", params, 'get')
      wx.request({
        url: menDianYangShi.url,
        data: menDianYangShi.params,
        header: getApp().globalData.headerPost,
        method: 'get',
        success: function (res) {
          console.log("======a=======", res)
          let data=res.data.relateObj.result;
          wx.hideLoading()
          if (res.data.errcode == "-1") {
            wx.showToast({
              title: res.data.errMessage,
              image: '/wxcomponents/images/icons/tip.png',
              duration: 2000
            })
          }
          else {
            let data=res.data.relateObj.result
            that.listPage.pageSize = res.data.relateObj.pageSize
            that.listPage.page = res.data.relateObj.curPage
            that.listPage.totalSize = res.data.relateObj.totalSize
            let dataArr = that.roomList;
            let tagArray=[];
            for(let i=0;i<data.length;i++){
              if(data[i].map.start_time){
                let date = new Date(data[i].map.start_time*1000);
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let minute = date.getMinutes();
                let second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                data[i].map.startTime=y+'-'+m+'-'+d+' '+' '+h+':'+minute+':'+second;
              }
            }
            console.log("===data====",data)
            if (param.page == 1) {
              dataArr = []
            }
            if (!data || data.length == 0) {
              that.setData({ roomList: null })
            } else {
              if (dataArr == null) { dataArr = [] }
              dataArr = dataArr.concat(data)
              that.setData({ roomList: dataArr })
            }
            wx.hideLoading()
          }
        }
      })
    },
    bindTypeItem:function(index){
        let that=this;
        that.positionTab=index
        that.listPage.courseId=that.courseTypeList[index].id
        that.getData(that.listPage,'upload');
    },
    /* 获取数据 */
    getTypeData: function (param) {
      var that = this
      let params=Object.assign({},param,{
      })
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_courses.html", params)
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let dataArr=res.data.relateObj.result
          if (!dataArr || dataArr.length == 0) {
            that.setData({ courseTypeList: [] })
          } else {
            that.setData({ courseTypeList: dataArr })
            that.listPage.courseId=dataArr[that.positionTab].id
            that.getData(that.listPage,'upload');
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    /* 获取数据 */
    getData: function (param) {
      var that = this
      let params=Object.assign({},param,{
      })
      console.log("===params==",params)
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_user_course_practise.html", params)
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let data=res.data.relateObj.result
          that.listPage.pageSize = res.data.relateObj.pageSize
          that.listPage.page = res.data.relateObj.curPage
          that.listPage.totalSize = res.data.relateObj.totalSize
          let dataArr = that.courseList;
          let tagArray=[];
          for (let i = 0; i < data.length; i++) {
            if (data[i].tags && data[i].tags != '') {
              tagArray = data[i].tags.slice(1, -1).split("][")
              data[i].tagArray = tagArray;
            }
          }
          console.log("===data====",data)
          if (param.page == 1) {
            dataArr = []
          }
          if (!data || data.length == 0) {
            that.setData({ courseList: null })
          } else {
            if (dataArr == null) { dataArr = [] }
            dataArr = dataArr.concat(data)
            that.setData({ courseList: dataArr })
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    /* 组件事件集合 */
    tolinkUrl: function (e) {
      console.warn("=======e=======", e);
      let linkUrl = e.currentTarget.dataset.url;
      getApp().globalData.linkEvent(linkUrl);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>